<template>
  <div v-html="compiledMarkdown"></div>
</template>

<script setup lang="ts">
import MarkdownIt from "markdown-it";
import { computed } from "vue";
import hljs, { HighlightOptions } from 'highlight.js';

const props = defineProps({
  content: {
    type: String,
    required: true,
  },
});

const md: any = new MarkdownIt({
  highlight: function (str: string | HighlightOptions, lang: string) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return (
          '<pre class="hljs"><code>' +
          hljs.highlight(lang, str, true).value +
          "</code></pre>"
        );
      } catch (__) {}
    }

    return (
      '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + "</code></pre>"
    );
  },
});
const compiledMarkdown = computed(() => {
  return md.render(props.content);
});
</script>

<style scoped></style>
